<template>
	<div class="panel-container">
		<el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
			<el-tab-pane name="componentLib">
				<template #label>
					<span> 节点属性 </span>
				</template>
				<el-scrollbar
					class="side-scroll-bar"
					:style="{ height: scrollerHeight }"
				>
					<el-collapse v-model="activeNames" class="widget-collapse">
						<component :is="getWidget" :options="widgetOptions" />
					</el-collapse>
				</el-scrollbar>
			</el-tab-pane>

			<el-tab-pane name="formLib" style="padding: 8px">
				<template #label>
					<span> 页面属性 </span>
				</template>
				<el-scrollbar
					class="side-scroll-bar"
					:style="{ height: scrollerHeight }"
				>
					<el-collapse v-model="layoutnames" class="widget-collapse">
						<el-collapse-item name="1" title="布局属性">
							<el-form :model="layoutData" label-width="60px" size="small">
								<el-form-item label="上下间距">
									<el-input
										v-model.number="layoutData.margin[1]"
										@blur="updateLayoutData('margin')"
									>
										<template #append>px</template>
									</el-input>
								</el-form-item>
								<el-form-item label="左右间距">
									<el-input
										v-model.number="layoutData.margin[0]"
										@blur="updateLayoutData('margin')"
									>
										<template #append>px</template>
									</el-input>
								</el-form-item>
								<el-form-item label="总列数">
									<el-input
										v-model="layoutData.colNum.lg"
										@blur="updateLayoutData('colNum')"
									>
										<template #prepend>PC</template>
									</el-input>
									<el-input
										v-model="layoutData.colNum.sm"
										@blur="updateLayoutData('colNum')"
									>
										<template #prepend>PAD</template>
									</el-input>
									<el-input
										v-model="layoutData.colNum.xxs"
										@blur="updateLayoutData('colNum')"
									>
										<template #prepend>H5</template>
									</el-input>
								</el-form-item>
							</el-form>
						</el-collapse-item>
						<el-collapse-item name="2" title="容器属性">
							<el-form :model="layoutData" :label-width="60" size="small">
								<el-form-item label="默认宽度">
									<el-input v-model.number="store.w">
										<template #append>列</template>
									</el-input>
								</el-form-item>
								<el-form-item label="默认高度">
									<el-input v-model.number="store.h">
										<template #append>行</template>
									</el-input>
								</el-form-item>
								<el-form-item label="行高">
									<el-input
										v-model.number="layoutData.rowHeight"
										@blur="updateLayoutData('rowHeight')"
									>
										<template #append>px</template>
									</el-input>
								</el-form-item>
							</el-form>
						</el-collapse-item>
					</el-collapse>
				</el-scrollbar>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { compWidget } from './widget'
import { useLayoutStore } from '@/store/modules/layout'
import { useTargetStore } from '@/store/modules/target'

defineOptions({
	name: 'SettingPanel'
})

const activeNames = ref('1')
const layoutnames = ref(['1', '2'])
const store = useLayoutStore()
const storeTarget = useTargetStore()
const firstTab = ref('componentLib')
const scrollerHeight = ref(0)

const layoutData = ref({})

const getWidget = computed(() => {
	return compWidget(storeTarget.targetType)
})

const widgetOptions = computed(() => {
	return storeTarget.getOptions
})

watch(
	() => store,
	() => {
		layoutData.value = {
			margin: store.margin,
			rowHeight: store.rowHeight,
			colNum: store.colNum
		}
	},
	{ immediate: true }
)

watch(
	() => storeTarget.currentId,
	(val) => {
		firstTab.value = val ? 'componentLib' : 'formLib'
	},
	{ immediate: true }
)
const updateLayoutData = (key?: string) => {
	if (key === 'margin') {
		store.setMargin([
			Number(layoutData.value.margin[0]),
			Number(layoutData.value.margin[1])
		])
	} else if (key === 'rowHeight') {
		store.setRowHeight(Number(layoutData.value.rowHeight))
	} else if (key === 'colNum') {
		Object.keys(layoutData.value.colNum).forEach((key) => {
			layoutData.value.colNum[key] = Number(layoutData.value.colNum[key] || 24)
		})
		store.setColNum(layoutData.value.colNum)
	}
}

const updateWidget = () => {}
onMounted(() => {
	scrollerHeight.value = window.innerHeight - 56 - 48 + 'px'
})
</script>

<style lang="scss" scoped>
.no-bottom-margin :deep(.el-tabs__header) {
	margin-bottom: 0;
}

.indent-left-margin {
	:deep(.el-tabs__nav) {
		margin-left: 20px;
	}
}

.el-collapse-item :deep(ul) > li {
	list-style: none;
}

.widget-collapse {
	border: none;
	padding: 0 10px;

	:deep(.el-collapse-item__header) {
		font-style: italic;
		font-weight: bold;
	}

	:deep(.el-collapse-item__content) {
		padding-bottom: 6px;

		ul {
			padding-left: 0; /* 重置IE11默认样式 */
			margin: 0; /* 重置IE11默认样式 */
			margin-block-start: 0;
			margin-block-end: 0.25em;
			padding-inline-start: 0;

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			.container-widget-item,
			.field-widget-item {
				display: inline-block;
				height: 32px;
				line-height: 32px;
				width: 96px;
				margin: 2px 6px 6px 0;
				cursor: move;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				background: #fff;
				border: 1px solid #e8e9eb;
				border-radius: 4px;
				padding: 0 8px;
			}

			.container-widget-item:hover,
			.field-widget-item:hover {
				background: #f1f2f3;
				border-color: #409eff;

				.color-svg-icon {
					color: #409eff;
				}
			}

			.drag-handler {
				position: absolute;
				top: 0;
				left: 160px;
				background-color: #dddddd;
				border-radius: 5px;
				padding-right: 5px;
				font-size: 11px;
				color: #666666;
			}
		}
	}
}
:deep(.el-input-group__prepend) {
	width: 56px;
}
</style>
